<template>
  <page class="pop_box">
    <banner>
      <span slot="title"> 当前部门: {{ departmentName }}</span>
      <el-button class="btn-gradient" type="primary" icon="el-icon-refresh" @click="reload">刷新</el-button>
    </banner>
    <div class="da">
      <div v-for="(i,idx) in xinList" :key="idx" class="ui">
        <div class="conten">
          <div class="top">
            <!-- <p class="dat">{{ i.name }}</p>
            <div class="dat_rig" style="display:none" v-text="i.code" /> -->
            <el-checkbox :indeterminate="i.isIndeterminate" v-model="i.checkAll" @change="handleCheckSecChange(i)">{{i.name}}</el-checkbox>
          </div>
          <div class="fu_tatal clearfix">
            <el-checkbox v-for="(city,ide) in i.child" :key="ide" :label="city" v-model="city.flag" @change="handleCheckedItemChange(city, i)" >{{city.name }}</el-checkbox>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="buttom">
        <el-checkbox v-model="checkAll" :checked="checked" @change="handleCheckAllChange">全选</el-checkbox>
        <el-button type="primary" @click="fabu">提交</el-button>
      </div>
    </div>
  </page>
</template>

<script>
import { jurisdiction, getFabu } from "../../../api/jurisdiction.js";
export default {
  inject: ['reload'],
  data() {
    return {
      level: [],
      checkAll: false,
      checkAllChide: [],
      checked: false,
      lit: [],
      checkedCities: [],
      cities: [],
      weigou: [],
      dataList: [],
      xinList: [],
      codeList: [],
      departmentName:''
    };
  },
  created() {
    this.init();
    this.departmentName =this.$route.query.name
  },
  methods: {
    // 初始化
    init() {
      jurisdiction({
        code: this.$route.query.code
      }).then(res => {
        this.xinList = res.data;
        // 三级转二级
        for (let i = 0; i < res.data.length; i++) {
          let len = res.data[i].child.length;
          for (let j = 0; j < len; j++) {
            if( res.data[i].child[j].child ){
              res.data[i].child = res.data[i].child.concat(res.data[i].child[j].child)
            }
          }
        }
        let ip = true;
        for (let i = 0; i < res.data.length; i++) {
          // res.data[i].
          let checkAll = true;
          let isIndeterminate = false;
          let len = res.data[i].child.length;
          let checkedCount = 0;
          for (let j = 0; j < len; j++) {
            if (res.data[i].child[j].flag==1) {
              res.data[i].child[j].flag = true;
              checkedCount++;
            } else {
              res.data[i].child[j].flag = false;
              ip = false;
              checkAll = false;
            }

            this.lit[i] = res.data[i].child;
          }
          res.data[i].checkAll = checkAll;
          res.data[i].isIndeterminate =  checkedCount > 0 && checkedCount < len;
        }
        if (ip) {
          this.checkAll = true;
        }
        this.onInit();
      });
    },
    // 不修改取默认数据
    onInit() {
      this.level = [].concat.apply([], this.lit);
      let list = [];
      this.level.forEach((item, idx) => {
        if (item.flag) {
          list.push(item.code);
          this.esList = list;
        }
      });
    },
    // 发布
    fabu() {
      let codeList = [];

      for (let index = 0; index < this.xinList.length; index++) {
        const element = this.xinList[index];
        if(element.isIndeterminate || element.checkAll) {
          codeList.push(element.code)
        }
        if(element.child) {
          for (let j = 0; j < element.child.length; j++) {
            const chelement = element.child[j];
            if(chelement.flag) {
              codeList.push(chelement.code)
            }
          }
        }
      }

      getFabu({
        code:  this.$route.query.code,
        type:'d',
        menu: codeList
      }).then(res => {
        if (res.code == "200") {
           this.$message({
          message: '修改成功！将返回当前首页！',
          type: 'success'
        });
          this.$router.push("/divisionManagement/divisionManagement");
        }
      });




    },
    handleCheckSecChange(item) {
      item.child.forEach((it)=> {
        it.flag = item.checkAll
      })
      // debugger
    },
    handleCheckedItemChange(item, parent) {
      const checked = parent.child.filter(item => item.flag) || [];
      let checkedCount = checked.length;
      parent.isIndeterminate = checkedCount > 0 && checkedCount < parent.child.length
      parent.checkAll = checkedCount ===  parent.child.length;
    },
    // 全选
    handleCheckAllChange(val) {

        for (let i = 0; i < this.xinList.length; i++) {
          this.xinList[i].checkAll = val;
          for (let j = 0; j < this.xinList[i].child.length; j++) {
            this.xinList[i].child[j].flag = val;
          }
        }


    }

  }
};
</script>

<style lang="scss">
.pop_box {
  width: 100%;
  padding-left: 26px;
  padding-right: 144px;
  height: auto;
  .el-checkbox__label {
    color: #333;
  }
  .da {


    .fu_quyu {
      padding: 0 24px 0 17px;
      border: 1px solid #f2f2f2;
      margin-bottom: 30px;
      box-shadow: #ccc 0px 0px 3px 1px;
      .top {
        height: 56px;
        line-height: 56px;
        margin-bottom: 24px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
        p {
          display: block;
          height: 54px;
          line-height: 54px;
          font-size: 14px;
          color: #333;
          font-size: 16px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
        }
      }
      .he {
        height: 103px;
        padding: 23px 0 31px 0;

        .el-form-item {
          float: left;
          width: 335px;
          margin-bottom: 22px;
          margin-right: 71px;
        }
        .el-form-item__label {
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          font-weight: 600;
          color: #333;
        }
        .el-input__inner {
          height: 40px;
          border-radius: 2px !important;
          border: 1px solid rgba(203, 203, 203, 1) !important;
          width: 240px !important;
        }
      }
    }
    .conten {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      margin-bottom: 29px;
      padding: 0 22px 29px 22px;
      border: 1px solid #f2f2f2;
      .top {
        height: 61px;
        line-height: 61px;
        padding-top: 5px;
        margin-bottom: 27px;
        border-bottom: 1px solid #f2f2f2;
        .dat {
          height: 55px;
          line-height: 55px;
          text-align: left;
          float: left;
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          letter-spacing: 1px;
        }
        .dat_rig {
          float: right;
          padding-left: 24px;
          width: 600px;
        }
      }
      .fu_tatal {
        position: relative;
        width: 100%;
        padding: 0 68px 0 40px;
        border: 1px solid rgba(242, 242, 242, 1);
        border-radius: 4px;
        h6 {
          padding: 0 18px;
          position: absolute;
          top: 48px;
          left: 0;
          width: 100%;
          height: 1px;
          border: 1px solid rgba(242, 242, 242, 1);
        }
        .el-checkbox {
          margin: 0 !important;
          padding: 0 !important;
          height: 85px !important;
          line-height: 85px !important;
          width: 225px !important;
          float: left !important;
          margin-right: 0 !important;

        }

        .p_b {
          position: absolute;
          top: 170px;
          left: 0;
          width: 1461px;
          height: 1px;
          border: 1px solid rgba(242, 242, 242, 1);
        }
      }
    }
    // 底部
    .buttom {
      width: 100%;
      height: 150px;
      margin-top: 10px;
      .el-checkbox {
        margin-left: 62px;
      }
      .el-button--primary {
        float: right;
        width: 100px;
        height: 40px;
        background: rgba(72, 141, 255, 1);
        border-radius: 4px;
      }
    }
  }
}
</style>
